import './App.css'
import {useState} from "react";

function App() {
  const [log, setLog] = useState([])
  const doFetch = (type) => {
    setLog([])
    fetch('http://120.55.124.108:60000/' + type)
      .then(response => {
        const reader = response.body.getReader();
        return new ReadableStream({
          start(controller) {
            function push() {
              reader.read().then(({done, value}) => {
                if (done) {
                  controller.close();
                  return;
                }
                const result = new TextDecoder().decode(value);
                setLog(arr => [...arr, result])
                controller.enqueue(value);
                push();
              });
            }

            push();
          }
        });
      })
      .then(stream => new Response(stream))
      .then(response => response.text())
      .then(text => console.log(text))
      .catch(err => console.log(err));
  }
  return (
    <>
      <div style={{marginBottom: 24, display: 'flex'}}>
        <button onClick={() => doFetch('build')} style={{marginRight: 24}}>Start build</button>
        <button onClick={() => doFetch('update')}>Update base project</button>
      </div>
      <div style={{display: 'flex', flexDirection: 'column'}}>
        {
          log.map((l, i) => l.split("\n").map((o, j) => <span key={i + 'k' + j}>{o}</span>))
        }
      </div>
    </>
  )
}

export default App
